<template>
    <div class="cfTable">
        <el-row>
            <el-col :span="24">
                <el-table 
                :data="tableData" 
                :border="tableDataObj.border" 
                tooltip-effect="dark" 
                @selection-change="handleSelection" 
                highlight-current-row 
                resizable  
                show-overflow-tooltip 
                :row-key="tableDataObj.id" 
                :default-expand-all="tableDataObj.defaultExpandAll"  
                :tree-props="tableDataObj.treeProps"
                size="small">
                    <el-table-column type="selection" v-if="tableDataObj.showSelection && !tableDataObj.showRadio" width="60" :resizable="false"></el-table-column>
                    <el-table-column v-if="!tableDataObj.showSelection && tableDataObj.showRadio" width="60" align="center" :resizable="false">
                        <el-radio slot-scope="{row}" :label="row" @change="handleSelectRadio"> </el-radio>
                    </el-table-column>
                    <el-table-column type="index" label="序号" v-if="tableDataObj.showIndex" width="60" align="center" :resizable="false"></el-table-column>
                    <template v-for="(item,index) in tableDataObj.option">
                        <el-table-column v-if="!item.needSlot && item.show" :min-width="item.minWidth" :align="item.align" :width="item.width" :key="index" :prop="item.prop" :label="item.label" show-overflow-tooltip :fixed="item.fixed">
                        </el-table-column>
                        <slot v-else-if="item.show" :name="item.prop"/>
                    </template>
                    <slot name="operate"></slot>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'RuoyiUiIndex',
    props: {
        tableDataObj: {
            type: Object,
            default: () => ({
                border: false, /**是否需要边框 */
                showSelection: false, /**是否显示多选框 */
                showRadio: false, /**是否显示单选框 */
                option: [] /**列表项数据配置label:列名称 prop：列属性 width：最小宽度 fixed： 固定列位置 needSlot：是否需要插槽 */
            })
        },
        tableData: {
            type: Array,
            default: ()=>[]
        }
    },
    data() {
        return {
            selectionAll: []
        };
    },

    mounted() {
        
    },

    methods: {
        handleSelection(selection) {
            if(!this.tableDataObj.showSelection) return;
            this.selectionAll = selection;
            this.$emit('handleSelectionChange', this.selectionAll);
        },
        handleSelectRadio(row) {
            this.selectionAll = [row];
            this.$emit('handleSelectionChange', this.selectionAll);
        }
    },
};
</script>

<style lang="scss">
.cfTable {
    .el-table .el-table__header-wrapper th, .el-table .el-table__header-wrapper th {
        font-size: 12px;
        color: #646566;
        background: #F8F8FA;
    }
    td, th {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: var(--global-height) !important;
    }
}
</style>